<template>
  <div>
    <el-card>
      帖子数量：{{ postPage.total }},帖子获赞数：{{userInfo.likeCount}} 关注贴吧数：{{userInfo.followCount}}
    </el-card>
    <h5>关注的吧</h5>
    <div v-if="!bardList||bardList.length === 0">
      <el-empty description="暂无数据"></el-empty>
    </div>
    <el-space>
      <el-card v-for="item in bardList" :key="item.bardId" shadow="hover">
        <el-space>
          <el-image style="width: 150px;" :src="item.cover"></el-image>
          <div>
           <el-link @click="goBardDetail(item.bardId)"> <el-text tag="b" size="large">{{ item.bardName }}</el-text></el-link>
            <br>
            <el-space>
              <el-icon><UserFilled /></el-icon>
              {{item.followerCount}}
            </el-space>
            <el-space>
              <el-icon><EditPen /></el-icon>
              {{item.postCount}}
            </el-space>
            <br>
            <el-button type="danger" @click="removeFollow(item.bardId)" v-if="isOwner" round>取消关注</el-button>
          </div>
        </el-space>
      </el-card>
    </el-space>
    <div>
      <div style="padding: 10px"><h5>发布的帖子</h5></div>
      <div v-if="!postPage.list || postPage.list.length===0">
        <el-empty description="暂无发帖"></el-empty>
      </div>
      <el-card v-for="(item,index) in postPage.list" :key="item.postId" shadow="hover" style="margin-bottom: 10px">
        <el-space>
          <el-avatar :src="item.avatar"></el-avatar>
          <div>
            <el-text>{{ item.nickname }}</el-text>
            <br>
            <el-text size="small">{{ $formatTimeAgo(item.createTime) }}</el-text>
          </div>
        </el-space>
        <div style="text-align: center">
          <el-link @click="goPostDetail(item.postId)"><h5>{{ item.title }}</h5></el-link>
        </div>
        <p>{{ item.content }}</p>
        <div>
          <el-space>
            <el-image style="width: 400px;height: 200px" :src="img.fileUrl" v-for="img in item.files"></el-image>
          </el-space>
        </div>
        <div>
          <el-space>
            <el-tag v-for="tag in item.tags">{{ tag.tagName }}</el-tag>
          </el-space>
        </div>
        <div>
          <el-space>
            <el-icon size="20">
              <IconLike></IconLike>
              <el-text>{{ item.likes }}</el-text>
            </el-icon>
          </el-space>
        </div>
      </el-card>
      <div class="flex-end">
        <el-pagination background layout="prev, pager, next" :total="postPage.total"
                       v-model:current-page="potQuery.pageNum"/>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {defineProps, onMounted, reactive, ref, watch} from "vue";
import {useRouter,useRoute} from "vue-router";
import {useUserStore} from "@/stores/user";
import {reqGetPostPage} from "@/api/social/posts";
import IconLike from "@/components/icons/IconLike.vue";
import {reqDelFollowBard, reqGetFollowBardList} from "@/api/social/bard";
import {reqGetForumUserInfoById} from "@/api/social/forum/user";

let props = defineProps({
  userId: {
    type: String,
    default: ''
  }
})
let userId=props.userId
const userStore = useUserStore()
const router = useRouter()
const route = useRoute()
let postPage = reactive({
  total: 0,
  pageNum: 1,
  list: []
})
let userInfo=ref({})
// let isOwner = computed(() => {
//   return route.params.userId == userStore.userId
// })
let bardList = ref([])
let potQuery = reactive({
  pageNum: 1,
  pageSize: 10,
  userId: route.params.userId
})
let getUserInfo = async () => {
  let res = await reqGetForumUserInfoById(userId)
  Object.assign(userInfo.value,res.data)
}
let getFollowBard = async () => {
  let res = await reqGetFollowBardList(userId)
  bardList.value = res.data
}
let getPostPage = async () => {
  let res = await reqGetPostPage(potQuery)
  Object.assign(postPage, res.data)
}
let removeFollow = async (bardId: string) => {
  ElMessageBox.confirm(
      '确定取消关注吗?',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      } as  any
  )
      .then(async () => {
        let res = await reqDelFollowBard(bardId)
        if (res.code == 200) {
          getFollowBard()
        }
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '撤销操作',
        })
      })
}
let goBardDetail=(bardId:string|number)=>{
  router.push({
    name: 'bard-detail',
    query: {
      bardId: bardId
    }
  })
}
let goPostDetail=(postId:string|number)=>{
  router.push({
    name: 'post-detail',
    query: {
      postId: postId
    }
  })
}
watch([() => postPage.pageNum], () => {
  getPostPage()
})

onMounted(() => {
  getPostPage()
  getFollowBard()
  getUserInfo()
})
</script>

<style scoped>

</style>
